import { useRef } from 'react'
import { render } from 'react-dom'
import { Editor, Repl, Viewer } from '../lib/main'

function App() {
  const editorRef = useRef<any>()
  const viewerRef = useRef<any>()
  return (
    <>
      <button onClick={() => { console.log(editorRef.current?.getCompressed()) }}>log compressed code</button>
      <button onClick={() => {
        viewerRef.current.reset()
      }}
      >
        reset
      </button>
      <Repl
        name="inula-playground"
        className="h-[100vh] w-full"
        split={{ split: 'vertical' }}
        defaultCode='console.log("Hello, world!")'
        // compressedCode={compressedCode}
      >
        <Editor ref={editorRef} />
        <Viewer ref={viewerRef} />
      </Repl>
    </>
  )
}
render(<App />, document.getElementById('root')!)
